<!--
 * @Author: 王灿
 * @Date: 2019-11-30 22:04:26
 * @LastEditTime: 2020-04-09 21:46:23
 * @Description: 礼包配置
 * @FilePath: \scarlet-sparrow-admin\src\views\configure\configure-vip\vip-operate\index.vue
 -->
<template>
  <div class="vip-operate">
    <!-- 选择类型 -->
    <div class="vip-operate__select">
      <el-select v-model="type" clearable placeholder="请选择类型" @change="onChangeType">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <!-- 礼包列表 -->
    <happy-scroll color="rgba(0,0,0,0.05)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="vip-operate__table">
        <!-- 礼包类型 -->
        <el-table-column prop="type" label="礼包类型">
          <template slot-scope="scope">
            <span>{{ onGetTypeVal(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <!-- 优惠卷 -->
        <el-table-column prop="retainId" label="课程/优惠卷模板">
          <template slot-scope="scope">
            <el-select
              v-if="tableData[scope.$index].type === 2"
              v-model="tableData[scope.$index].retainId"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="请选择"
              :remote-method="onGetCourseList"
              @change="onChangeCourse(scope.$index)"
            >
              <el-option
                v-for="item in courseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-if="tableData[scope.$index].type === 3"
              v-model="tableData[scope.$index].retainId"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="请选择"
              :remote-method="onGetCouponList"
              @change="onChangeCoupon(scope.$index)"
            >
              <el-option
                v-for="item in couponList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- 礼包名称 -->
        <el-table-column prop="retainName" label="礼包名称">
          <template slot-scope="scope">
            <el-input
              v-if="tableData[scope.$index].type !== 1"
              :placeholder="onGetTypeVal(scope.row.type) + '名称'"
              clearable
              v-model="tableData[scope.$index].retainName"
              :readonly="tableData[scope.$index].type !== 1"
            ></el-input>
            <el-select
              v-if="tableData[scope.$index].type === 1"
              v-model="tableData[scope.$index].retainName"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="请选择"
              :remote-method="onGetProductList"
              style="width: 100%;"
            >
              <el-option
                v-for="item in productList"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- 礼包数量 -->
        <el-table-column prop="retainNum" label="礼包数量">
          <template slot-scope="scope">
            <el-input placeholder="礼包数量" clearable v-model="tableData[scope.$index].retainNum"></el-input>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="active" @click="onDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <div class="vip-operate__btns dialog-footer">
      <el-button type="primary" @click="onSubmitForm">确 定</el-button>
      <el-button @click="onCancelForm">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getModularList, getProductList } from '@/api/commodity.js'
import { getCourseList } from '@/api/course.js'
import { getPropertyAdd, getPropertyUpdate } from '@/api/configure.js'
import { storageSetItem, storageGetItem } from '@/utils/index.js'
export default {
  name: 'VipOperate',
  components: {},
  props: {
    // 名称
    propertyName: {
      type: String,
      default: ''
    },
    // 礼包详情
    propertyValue: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      type: '',
      options: [
        { value: 1, label: '商品' },
        { value: 2, label: '课程' },
        { value: 3, label: '优惠卷模板'},
        { value: 4, label: '摄影' },
        { value: 5, label: '用户vip名额' }
      ],
      // 礼包数据列表
      tableData: this.propertyValue,
      // 商品列表
      productList: [],
      // 课程列表
      courseList: [],
      // 优惠卷列表
      couponList: []
    }
  },
  watch: {
    // 深度监听数据数组改变
    propertyValue: {
      handler() {
        this.tableData = this.propertyValue
      }
    }
  },
  created() {
    this.onGetProductList()
    this.onGetCourseList()
    this.onGetCouponList()
  },
  methods: {
    // 根据类型获取名称
    onGetTypeVal(type) {
      let index = this.options.findIndex(item => item.value === type)
      return this.options[index].label
    },
    // type类型变化
    onChangeType(value) {
      if (value !== '') {
        if (value === 2 || value === 3) {
          this.tableData.push({
            type: value,
            retainId: '',
            retainName: '',
            retainNum: ''
          })
        } else if (value === 4 || value === 5) {
          this.tableData.push({
            type: value,
            retainName: this.onGetTypeVal(value),
            retainNum: ''
          })
        } else {
          this.tableData.push({ type: value, retainName: '', retainNum: '' })
        }
      }
    },
    // 获取商品列表
    onGetProductList(query) {
      this.productList = []
      getProductList({
        name: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.name
          this.productList.push(params)
        })
      })
    },
    // 获取课程列表
    onGetCourseList(query) {
      this.courseList = []
      getCourseList({
        theme: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.theme
          this.courseList.push(params)
        })
      })
    },
    // 获取优惠卷模板列表
    onGetCouponList(query) {
      this.couponList = []
      getModularList({
        productName: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.couponName
          this.couponList.push(params)
        })
      })
    },
    // 根据优惠卷Id获取名称
    onGetCouponIdVal(id) {
      let index = this.couponList.findIndex(item => item.value === id)
      return this.couponList[index].label
    },
    // 获取优惠卷对应名称
    onChangeCoupon(index) {
      this.tableData[index].retainName = this.onGetCouponIdVal(
        this.tableData[index].retainId,
        this.couponList
      )
    },
    // 根据课程id取名称
    onGetCourseIdVal(id) {
      let index = this.courseList.findIndex(item => item.value === id)
      return this.courseList[index].label
    },
    // 获取课程对应名称
    onChangeCourse(index) {
      this.tableData[index].retainName = this.onGetCourseIdVal(
        this.tableData[index].retainId,
        this.courseList
      )
    },
    // // 根据商品id取名称
    // onGetProductIdVal(id) {
    //   let index = this.productList.findIndex(item => item.value === id)
    //   return this.productList[index].label
    // },
    // // 获取商品对应名称
    // onChangeProduct(index) {
    //   this.tableData[index].retainName = this.onGetProductIdVal(
    //     this.tableData[index].retainId,
    //     this.productList
    //   )
    // },
    // 删除
    onDelete(index) {
      this.tableData.splice(
        this.tableData.findIndex((item, i) => i === index),
        1
      )
    },
    // 提交
    onSubmitForm() {
      if (this.tableData.length !== 0) {
        this.tableData.forEach((item, i) => {
          if (
            this.tableData[i].retainId === '' ||
            this.tableData[i].retainName === '' ||
            this.tableData[i].retainNum === ''
          ) {
            this.$message({
              type: 'error',
              message: '请输入'
            })
            return false
          }
        })
        if (storageGetItem('propertyData').length === 0) {
          // 新增
          let propertyData = []
          propertyData = Array.of({propertyName: this.propertyName, propertyValue: JSON.stringify(this.tableData)})
          storageSetItem('propertyData', propertyData)
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.onRefresh()
        } else {
          // 编辑
          let propertyData = storageGetItem('propertyData')
          propertyData[0].propertyValue = JSON.stringify(this.tableData)
          storageSetItem('propertyData', propertyData)
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.onRefresh()
        }
      } else {
        this.$message({
          type: 'error',
          message: '请选择类型'
        })
      }
    },
    // 取消
    onCancelForm() {
      let data = { isShow: false, isRefresh: false }
      this.$emit('onCancelBtn', data)
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('onCancelBtn', data)
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.vip-operate {
  height: 100%;
  @include column;
  .vip-operate__select {
    margin-bottom: 15px;
  }
  .vip-operate__table {
    border: 1px solid #ddd;
  }
  .el-table td,
  .el-table th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
  }
  .vip-operate__btns {
    padding-top: 10px;
    box-shadow: 0 -2px 2px #ececec;
  }
}
</style>